<template>
  <div>
    <a-drawer
      title="开课学生列表"
      :closable="false"
      :maskClosable="false"
      :width="800"
      :visible="visible"
    >
      <div>
        <a-card :bordered="false" :bodyStyle="tstyle">
          <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="48">
                <a-col :md="16" :sm="24">
                  <a-form-item label="关键词">
                    <a-input v-model="queryParam.keyword" allow-clear placeholder="请输入学生姓名/学号"/>
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <span class="table-page-search-submitButtons">
                    <a-button type="primary" @click="getData(baseParam)">查询</a-button>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </a-card>
        <a-card :bordered="false">
          <a-table
            bordered
            ref="table"
            :columns="columns"
            :dataSource="loadData"
            :loading="tableLoading"
            :pagination="false"
            :rowKey="(record) => record.studentId"
          >
          <span slot="action" slot-scope="text, record">
            <a-button type="link" @click="showInfo(record.studentId)">选课</a-button>
          </span>
          </a-table>
          <cs-info ref="csInfo" @ok="handleDetailOk"/>
        </a-card>
      </div>
      <div class="drawer-footer">
        <a-button class="left" @click="handleCancel">关闭</a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
  import { getCoursePublishStudentList } from '@/api/modular/system/courseSelectionManage'
  import CsInfo from './csInfo'

  export default {
    components: { CsInfo },
    data() {
      return {
        tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
        // 查询参数
        queryParam: {
          keyword: undefined
        },
        visible: false,
        coursePublishId: '',
        schoolYearId: '',
        schoolTermId: '',
        columns: [
          {
            title: '学生姓名',
            dataIndex: 'studentName'
          },
          {
            title: '学生学号',
            dataIndex: 'studentNum'
          },
          {
            title: '学生专业',
            dataIndex: 'studentMajor'
          },
          {
            title: '学生标签',
            dataIndex: 'studentTags'
          },
          {
            title: '已选课数量',
            dataIndex: 'studentCsNum'
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        loadData: '',
        tableLoading: false,
        baseParam: ''
      }
    },
    methods: {
      handleCancel() {
        this.visible = false
        this.$emit('ok')
      },
      open(param) {
        this.visible = true
        this.coursePublishId = param.coursePublishId
        this.schoolYearId = param.schoolYearId
        this.schoolTermId = param.schoolTermId
        this.baseParam = param
        this.getData(param)
      },
      getData(param) {
        this.tableLoading = true
        getCoursePublishStudentList({
          coursePublishId: param.coursePublishId,
          keyword: this.queryParam.keyword
        }).then((res) => {
          if (res.success) {
            this.loadData = res.data
          }
        }).finally(() => {
          this.tableLoading = false
        })
      },
      handleDetailOk() {
        this.getData(this.baseParam)
      },
      showInfo(userId) {
        let param = {
          coursePublishId: this.coursePublishId,
          schoolYearId: this.schoolYearId,
          schoolTermId: this.schoolTermId,
          studentId: userId
        }
        this.$refs.csInfo.open(param)
      }
    }
  }
</script>